<template>
  <div class="bigBox">
    <!-- 搜索 -->
    <div class="search">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="策略搜索: ">
          <el-input v-model="value" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="onSubmit"
          >查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 内容部分 -->
    <div class="content">
      <!-- 新增角色按钮 -->
      <div class="content">
        <el-row style="height: 60px">
          <el-button
            icon="el-icon-plus"
            size="small"
            type="primary"
            @click="add"
          >新建</el-button>
        </el-row>
      </div>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column prop="policyName" label="策略名称" width="600" />
        <el-table-column prop="discount" label="策略方案" width="600" />
        <el-table-column prop="createTime" label="创建日期" width="200" />
        <el-table-column width="180" label="操作">
          <template #default="{ row }">
            <el-link
              type="primary"
              :underline="false"
              style="margin-right: 10px"
              @click="lookDetails(row)"
            >查看详情</el-link>
            <el-link
              type="primary"
              :underline="false"
              style="margin-right: 10px"
              @click="add(row)"
            >修改</el-link>
            <el-link
              type="danger"
              :underline="false"
              @click="del(row)"
            >删除</el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增弹窗 -->
    <el-dialog
      title="新增商品类型"
      :visible.sync="addVisible"
      width="30%"
      :before-close="addVisibleFn"
    >
      <el-form ref="form" label-width="80px" :model="from" :rules="rules">
        <el-form-item label="活动名称" prop="policyName">
          <el-input v-model="from.policyName" />
        </el-form-item>
        <el-form-item label="活动区域" prop="discount ">
          <el-input-number v-model="from.discount" controls-position="right" style="width:455px" />
          <el-form-item>
            <div class="btn">
              <el-button type="warning" @click="addVisibleFn">取消</el-button>
              <el-button type="danger" @click="yes">确认</el-button>
            </div>
          </el-form-item>
        </el-form-item></el-form>
    </el-dialog>
    <!-- 底部 -->
    <div v-if="dataAll.totalCount>10">
      <el-row>
        <el-col
          :span="18"
        >共{{ dataAll.totalCount }}条记录 第 {{ dataAll.pageIndex }}/{{ dataAll.totalPage }} 页
          <div
            class="grid-content bg-purple"
          /></el-col>
        <el-col :span="6">
          <el-button-group>
            <el-button
              type="primary"
              icon="el-icon-arrow-left"
              :disabled="upShow"
              @click="up"
            >上一页</el-button>
            <el-button
              type="primary"
              :disabled="underShow"
              @click="under"
            >下一页<i

              class="el-icon-arrow-right el-icon--right"
            /></el-button>
          </el-button-group>
          <div
            class="grid-content bg-purple-light"
          /></el-col>
      </el-row>
    </div>
    <!-- 查看详情 -->
    <el-dialog
      title="策略详情"
      :visible.sync="modifyShow"
      width="30%"
      :before-close="modifyShowFn"
    >
      <div>策略名称：

      </div>
      <div>策略方案
        <el-table
          :data="clList"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="序号"
            width="180"
          />
          <el-table-column
            prop="nodeName"
            label="点位名称"
            width="180"
          />
          <el-table-column
            prop="innerCode"
            label="设备编号"
          />
        </el-table>
      </div>
      <!-- 底部 -->
      <div v-if="clAll.totalCount>10">
        <el-row>
          <el-col
            :span="18"
          >共{{ clAll.totalCount }}条记录 第 {{ clAll.pageIndex }}/{{ clAll.totalPage }} 页
            <div
              class="grid-content bg-purple"
            /></el-col>
          <el-col :span="6">
            <el-button-group>
              <el-button
                type="primary"
                icon="el-icon-arrow-left"
                :disabled="clShow"
                @click="xxup"
              >上一页</el-button>
              <el-button
                type="primary"
                :disabled="clUnderShow"
                @click="xxunder"
              >下一页<i

                class="el-icon-arrow-right el-icon--right"
              /></el-button>
            </el-button-group>
            <div
              class="grid-content bg-purple-light"
            /></el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { acAPi, modifyAPi, delTactics, addTactics, tacticsSearch } from '@/api'
export default {
  data() {
    return {
      num: 1,
      clShow: false,
      clUnderShow: false,
      modifyShow: false, // 详细信息
      upShow: false, // 上下按钮禁用状态
      underShow: false, // 上下按钮禁用状态
      row: {},
      addVisible: false, // 控制添加的弹出层
      value: '',
      clList: [], // 策略详情
      clAll: [], // 策略详情
      tableData: [], // 表格绑定
      dataAll: {}, // 全部数据
      from: {
        policyName: '', // 新增里的输入框
        discount: ''// 方案
      },
      rules: {
        policyName: { required: true, message: '请输入', trigger: 'blur' }
      }
    }
  },
  created() {
    this.publicFn()
  },
  methods: {
    xxup() {
      // this.num--
      this.num = this.num - 1

      this.lookDetails(this.row)
    },
    xxunder() {
      // +this.dataAll.pageIndex - 1, this.dataAll.pageSize
      this.num = this.num + 1
      this.lookDetails(this.row)

      // this.lookDetails(this.row, this.clAll.pageIndex + 1, this.clAll.pageSize)
    },
    async lookDetails(row, x, y) {
      console.log(this.num)
      this.row = row
      // 查看详情
      this.modifyShow = true
      // console.log(row)
      const { data } = await acAPi(row.policyId, this.num, 10)
      this.clAll = data
      this.clList = data.currentPageRecords
      // console.log(res)
      if (data.pageIndex <= 1) {
        this.clShow = true
      } else {
        this.clShow = false
      }
      if (data.pageIndex === data.totalPage) {
        this.clunderShow = true
      } else {
        this.clunderShow = false
      }
    },
    modifyShowFn() {
      // 详细信息的关闭
      this.modifyShow = false
    },
    yes() {
      // 增加里的确定
      this.$refs.form.validate(async(valid) => {
        if (!valid) return
        if (this.row.policyName) {
          console.log(this.row)
          await modifyAPi(this.row.policyId, this.from)
          this.$message.success('修改成功')
        } else {
          await addTactics(this.from)
          this.$message.success('添加成功')
        }
        this.addVisibleFn()
        this.publicFn()
      })
    },
    addVisibleFn() {
      // 添加弹出层的关闭方法
      this.addVisible = false
      this.from = {}
      this.$refs.form.resetFields() // 清空输入框
    },
    onSubmit() {
      // 查询按钮
      this.publicFn('', '', this.value)
    },
    add(row) {
      console.log(row)
      this.row = row
      // 添加
      if (row.policyName) {
        this.from = {
          policyName: row.policyName,
          discount: row.discount
        }
      }
      this.addVisible = true
    },

    del(row) {
      // 删除
      this.$confirm('真的要删除吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 删除
        await delTactics(row.policyId, this.dataAll.pageIndex, this.dataAll.pageSize, row.policyName)
        this.$message.success('删除成功')
        // 删除最后一页最后一条数据时，页数减 1
        if (this.tableData.length === 1 && this.dataAll.pageIndex > 1) {
          this.dataAll.pageIndex--
        }
        this.publicFn()
      }).catch(error => {
        console.log(error)
      })
    },
    // 公共
    async publicFn(pageIndex, pageSize, policyName) {
      const { data } = await tacticsSearch({
        pageIndex: pageIndex,
        pageSize: pageSize,
        policyName: policyName
      })
      console.log(data)
      this.dataAll = data
      this.tableData = data.currentPageRecords
      if (data.pageIndex <= 1) {
        this.upShow = true
      } else {
        this.upShow = false
      }
      if (data.pageIndex === data.totalPage) {
        this.underShow = true
      } else {
        this.underShow = false
      }
    },
    up() {
      // 上一页
      this.publicFn(+this.dataAll.pageIndex - 1, this.dataAll.pageSize)
    },
    under() {
      // 下一页
      this.publicFn(+this.dataAll.pageIndex + 1, this.dataAll.pageSize, '', '')
    }
  }
}
</script>
  <style lang="scss" scoped>
.bigBox {
  padding: 20px;
  .search {
    background-color: #fff;
    padding: 10px;
    padding-bottom: 0px;
  }
}
.content {
  margin-top: 20px;
  background-color: #fff;
  padding: 5px;
}
.bottom {
  margin-top: 30px;
}
.btn {
  margin-top: 20px;
  text-align: center;
}
</style>

